<template>
    <a-select @change="inputVal" class="w-full" v-model:value="state.value" :showSearch="props.search" :placeholder="props.placeholder" :options="state.options" :filter-option="filterOption" :allowClear="props.allowClear">
        <slot></slot>
        <template #notFoundContent>
            <slot name="notFoundContent">
            </slot>
        </template>
    </a-select>
</template>
<script setup>
const emits = defineEmits(['update:value', 'change'])
const props = defineProps({
    value: String,
    allowClear: {
        type: Boolean,
        default: true,
    },
    placeholder: {
        type: String,
        default: '请选择',
    },
    options: {
        type: Array,
        default: [],
    },
    search: {
        type: Boolean,
        default: false,
    },
})
const state = reactive({
    value: undefined,
    options: [],
})

watch(
    () => props.value,
    (newVal, oldVal) => {
        state.value = newVal
    },
    { deep: true, immediate: true }
)

watch(
    () => props.options,
    (newVal, oldVal) => {
        state.options = newVal
    },
    { deep: true, immediate: true }
)

const inputVal = (val, item) => {
    emits('update:value', state.value)
    emits('change', item)
}
const filterOption = (input, option) => {
    let key = null
    state.options.forEach(element => {
        if (element.label.indexOf(input) > -1) {
            if (option.value.indexOf(element.value) > -1) {
                key = option.value
            }
        }
    })
    return key
}

defineExpose({})
const {} = toRefs(state)
</script>
